<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />

    <script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1396058-8']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script>
<script src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

<!-- chart lib -->
<script type="text/javascript" src="total-chart17.js"></script>

<link rel="stylesheet" type="text/css" href="examples.css" />

    <style type="text/css">
    #container {
        padding:10px;
    }
    #container .x-panel {
        margin:10px;
    }
    #container .x-panel-ml {
        padding-left:1px;
    }
    #container .x-panel-mr {
        padding-right:1px;
    }
    #container .x-panel-bl {
        padding-left:2px;
    }

    #container .x-panel-br {
        padding-right:2px;
    }
    #container .x-panel-body {

    }
    #container .x-panel-mc {
        padding-top:0;
    }
    #container .x-panel-bc .x-panel-footer {
        padding-bottom:2px;
    }
    #container .x-panel-nofooter .x-panel-bc {
        height:2px;
    }
    #container .x-toolbar {
        border:1px solid #99BBE8;
        border-width: 0 0 1px 0;
    }
    .chart {
        background-image: url(chart.gif) !important;
    }
	.status-cls {
		font-size:1.0em;
		margin-top:-0.1em;
		background:url(loading.gif)no-repeat;
		padding-left: 20px;
	}	
	</style>
</head>

<body id="docBody">

    <input type="file" id="fileSelector"  /> 
    <script type="text/javascript">
	//  파일 선택시.
      var message = [];
      if (!document.getElementById('fileSelector').files) {
        message = '<p>The ' +
                  '<a href="http://dev.w3.org/2006/webapi/FileAPI/" target="_blank">File API</a>s ' +
                  'are not fully supported by this browser.</p>' +
                  '<p>Upgrade your browser to the latest version.</p>';
        document.querySelector('body').innerHTML = message;
      }
      else {
        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false);
		// Add an onchange event listener for the <input id="fileSelector"> element.
      }

  function handleFileSelection(evt) {
	evt.stopPropagation(); // Do not allow the drop event to bubble.
	evt.preventDefault(); // Prevent default drop event behavior.
	var files = evt.target.files;		// select file
	if (!files) {
	  alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
	  return;
	}
	// "files" is a FileList of file objects. Try to display the contents of each file:
	for (var i = 0, file; file = files[i]; i++) {
	  if (!file) {
		alert("Unable to access " + file.name); 
		continue; // Immediately move to the next file object.
	  }
	  if (file.size == 0) {
		alert("Skipping " + file.name.toUpperCase() + " because it is empty.");
		continue;
	  }
	  startFileRead(file); // Asychronously fire off a file read request.
	} // for
  } // handleFileSelection      

  function startFileRead(fileObject) {
	var reader = new FileReader();
	reader.onloadend = displayFileText; // "onloadend" fires when the file contents have been successfully loaded into memory.
	reader.abort = handleFileReadAbort; // "abort" files on abort.
	reader.onerror = handleFileReadError; // "onerror" fires if something goes awry.

	if (fileObject) { // Safety first.
	  reader.readAsText(fileObject); 
	  // Asynchronously start a file read thread. 
	  //Other supported read methods include readAsArrayBuffer() and readAsDataURL().
	}
  } // startFileRead

  function displayFileText(evt) {
	var fileString = evt.target.result; // Obtain the file contents, which was read into memory.
	//alert("<pre>" + sanitizeHTML(fileString) + "</pre>", {width: 40, tile: true});  
//	alert(sanitizeHTML(fileString), {width: 40, tile: true});  

	otherCSVLoad(fileString);

	// sanitizeHTML() is used in case the user selects one or more HTML or HTML-like files and the <pre> tag preserves both spaces and line breaks.
  } // displayFileText
	function sanitizeHTML(htmlString) {
		var tmp = document.createElement('div');
		tmp.appendChild( document.createTextNode(htmlString) );
		return tmp.innerHTML;
  } // stripHtmlFromText
	
  function handleFileReadAbort(evt) {
	alert("File read aborted.");
  } // handleFileReadAbort

  function handleFileReadError(evt) {
	var message;
	
	switch (evt.target.error.name) {
	  case "NotFoundError":
		alert("The file could not be found at the time the read was processed.");
		break;
	  case "SecurityError":
		message = "<p>A file security error occured. This can be due to:</p>";
		message += "<ul><li>Accessing certain files deemed unsafe for Web applications.</li>";
		message += "<li>Performing too many read calls on file resources.</li>";
		message += "<li>The file has changed on disk since the user selected it.</li></ul>";
		alert(message);
		break;
	  case "NotReadableError":
		alert("The file cannot be read. This can occur if the file is open in another application.");
		break;
	  case "EncodingError":
		alert("The length of the data URL for the file is too long.");
		break;
	  default:
		alert("File error code " + evt.target.error.name);
	} // switch
  } // handleFileReadError
    </script>
<hr/>
<input type="button" onclick="chart1()" value=" Column Chart " />
<input type="button" onclick="chart2()" value=" Pie Chart " />
<input type="button" onclick="chart3()" value=" Bar Chart " />
<input type="button" onclick="chart4()" value=" Line Chart " />
<input type="button" onclick="initChart()" value=" Delete Chart " />
<hr/>
<script type="text/javascript" src="examples.js"></script><!-- EXAMPLES -->

	<!-- file-loading.. -->
	<div class="status-cls" id="status" style="display:none;">Loading</div> 

<div id="container">
</div>
</body>
</html>